{include file="public/head" /}
<div class="layui-fluid" style="top: 1rem;">
    <div class="layui-row">
        <form class="layui-form">
            <input type="hidden" id="id" name="id" required="" value="{$admin.id?$admin.id:''}"
                   lay-verify="id" autocomplete="off" class="layui-input">
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>用户名</label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" required="" lay-verify="username" autocomplete="off" class="layui-input" value="{$admin.username?$admin.username:''}"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>将会成为您唯一的登入名</div></div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>昵称</label>
                <div class="layui-input-inline">
                    <input type="text" id="nickname" name="nickname" required="" lay-verify="nikename" autocomplete="off" class="layui-input" value="{$admin.nickname?$admin.nickname:''}"></div>
            </div>
            <div class="layui-form-item">
                <label for="role" class="layui-form-label">
                    <span class="x-red">*</span>角色</label>
                <div class="layui-input-inline">
                    <!--<select id="role" name="role" class="valid">
                        <option value="xz">&#45;&#45;请选择角色&#45;&#45;</option>
                        {volist name="r" id="vr" }
                        <option value="{$vr.id}" {if !empty($admin)} {eq name="$admin.role_id" value="$vr.id"} selected {/eq}{/if} >{$vr['nickname']}</option>
                        {/volist}
                    </select>-->
                    <div id="admin_role" style="width: 200%;"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="password" class="layui-form-label">
                    密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name="password" lay-verify="pass" autocomplete="off" class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div></div>
            <div class="layui-form-item">
                <label for="repass" class="layui-form-label">
                    确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="repass" name="repass" lay-verify="repass" autocomplete="off" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label for="repass" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">保存</button></div>
        </form>
    </div>
</div>
</body>
<script src="/static/js/xmSelect.js"></script>
<script>

    layui.use(['form', 'layer','jquery'],
    function() {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;
        //--------------------------获取角色列表以及回显选中--------------------------------//
        var roleArr=JSON.parse('{$r|raw}');
        var roleData=[];
        var roleIds="{$admin.role_ids?$admin.role_ids:''}";
        var myRoleArr=[];
        if(roleIds){
            myRoleArr=roleIds.split(',');
        }
        if(roleArr){
            for (var j=0;j<roleArr.length;j++) {
                roleData[j]={name:roleArr[j].nickname,value:roleArr[j].id,selected:$.inArray(roleArr[j].id.toString(),myRoleArr)>='0'?true:false}
            }
        }
        //下拉多选
        var xmRole = xmSelect.render({
            el: '#admin_role',
            tips: '请选择管理员所属角色',
            empty: '呀, 咋没有数据呢',//没有数据是显示
            name:'role_ids',//绑定表单的name值
            filterable: true,//默认搜索开启
            paging: true,//是否开启分页
            pageSize: 10,//分页
            data: roleData,
            show(){
                //点击打开时执行
            },
            hide(){
                //关闭时执行
            }
        });
        //--------------------------获取角色列表以及回显选中--------------------------------//
        //---------------------------自定义验证规则-----------------------------------------//
        form.verify({
            username: function(value) {
                if (value.length < 5) {
                    return '用户名至少得5个字符啊';
                }
            },
            nikename: function(value) {
                if (value.length < 2) {
                    return '昵称至少得2个字符啊';
                }
            },
            pass: function(value) {
                if (value && (value.length < 6 || value.length > 16)) {
                    return '请输入6-16个字符的密码！';
                }
            },
            repass: function(value) {
                if ($("#password").val() != value) {
                    return '确认密码与输入密码不相同！';
                }
            },
        });
        //---------------------------自定义验证规则-----------------------------------------//
        //监听提交
        form.on('submit(add)',
            function(data) {
                $.ajax({
                    type: "POST",
                    url: "{:getUrl()}Admin/update",
                    data: data.field,
                    dataType: "json",
                    success: function(data){
                        if(data.code ==200){
                            layer.msg(data.msg, {icon: 6},function(){
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            });
                        }else{
                            layer.msg(data.msg,{icon: 5,time:1000});
                        }
                    }
                });
                return false;
            });
    });
</script>
</html>